<template>
  <el-dialog
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="title"
    :visible.sync="visible"
    width="80%"
    center
  >
    <div v-loading="changeListLoading">
      <el-empty v-if="changeList.length <= 1 || !changeList.length" description="暂无变更记录" />
      <div v-else>
        <div v-for="(item, index) in changeList" :key="index">
          <ChangeRecordInfo :base-info="item" />
        </div>
        <div class="d-flex justify-content-end">
          <el-pagination
            layout="prev, pager, next"
            :current-page.sync="pageInfo.pageIndex"
            :page-size="pageInfo.pageSize"
            :total="pageInfo.total"
            @current-change="pageChangeHandle"
          />
        </div>
      </div>
    </div>

    <span slot="footer">
      <el-button size="medium" @click="closeDialog">关闭</el-button>
    </span>

  </el-dialog>
</template>

<script>
import ChangeRecordInfo from './ChangeRecordInfo'

export default {
  name: 'ChangeRecord',
  components: {
    ChangeRecordInfo
  },
  props: {
    title: {
      type: String,
      default: '收/发货信息变更记录'
    },
    changeListLoading: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      default: false
    },
    changeList: {
      type: Array,
      default: () => []
    },
    pageInfo: {
      type: Object,
      default: () => ({
        total: 0,
        pageIndex: 1,
        pageSize: 2
      })
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
    },
    pageChangeHandle(pageIndex) {
      this.$emit('pageChange', pageIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
